<script setup lang="ts">

import {App,} from 'ant-design-vue';
import {Sender,}from 'ant-design-x-vue';
import useRecord from "@/hooks/useRecord.ts";
const { message } = App.useApp();
//const {isMobile} = useKV()

/* props */
const props =defineProps({
	uploadSpeechEnable: { type:Boolean, default:true, required:false, },
	source: { type:String, default:'chat', required:false,}
})

/* emits */
const emit = defineEmits(['onSend','onCancel']);

/* data */
const inPush = inject('inPush',ref(false)); //是否正处于信息推流中？

const value=ref('') //对话框写的文本内容


/* methods */

/* 语音转文字hooks*/
const {	recording, speechOption,setFinishFunc} = useRecord(props)
setFinishFunc((str:string) => {
	value.value = str
})

/* methods */
//消息发送事件
const handleMsgSubmit = (msg:string)=>{
	if(recording.value)	return;
	inPush.value = true;
	const message = msg.trim()
	if(message==='') return
	emit('onSend',{
		msg:message,
	});
	value.value = ''
}
const handleCancel = ()=>{
	message.warning('stop Send');
	inPush.value = false;
	emit('onCancel');
}

// 重设置文本框里的内容
const setTextContent = (text:string)=>{
	value.value = text;
}

onMounted(()=>{
	nextTick(()=>{
		const attach = document.querySelector('.ant-attachment')
		if(attach){
			const inputs = attach.querySelectorAll('input');
			for(const input of inputs){
				input.removeAttribute('capture')
			}
		}
	})
})

defineExpose({
	inPush,value, //data
	setTextContent, handleMsgSubmit, //methods
})
</script>

<template>
	<div class="sender-wrapper" id="sender-wrapper">
		<Sender :loading="inPush" :allow-speech="speechOption" placeholder="电脑端请用 `Shift + Enter` 键换行" v-model:value="value"
				@submit="handleMsgSubmit" @cancel="handleCancel" :styles="{input:{maxHeight:'100px'}}">
		</Sender>
	</div>
</template>

<style scoped lang="scss">
.sender-wrapper{margin:0 16px; padding-top:10px;}
</style>